<template>
  <div class="todoapp">
    <heater></heater>
    <min></min>
    <foote></foote>
  </div>
</template>

<script>
import './styles/base.css'
import './styles/index.css'
import foote from './components/TodoFooter.vue'
import heater from './components/TodoHeader.vue'
import min from './components/TodoMain.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'TodolistApp',

  components: {
    foote,
    heater,
    min
  },
  data () {
    return {}
  },

  mounted () {},

  methods: {
    ...mapMutations(['huanc'])
  },
  computed: {
    ...mapState(['list'])
  },
  // 监听如果变化把存到本地
  watch: {
    list: {
      deep: true,
      handler () {
        localStorage.setItem('list', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
